<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en"  xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">

<head>
	<div th:replace="~{commons/template::style}"></div>
	<title>教师管理</title>

</head>

<body>
<div th:replace="~{commons/template::head}"></div>

<div class="container-fluid">
	<div class="row">
		<div th:replace="~{commons/template::leftSide(active='teacher')}"></div>

		<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
			<h2>教师管理</h2>

			<div class="table-responsive" th:fragment="detail">
				<table class="table table-striped table-sm">
					<form class="form-inline" th:action="@{/selectTeacher}">
						<div class="row">
							<div class="col-md-4"></div>
							<div class="col-md-3">
								<div class="form-group">
									<input type="text" name="searchName" class="form-control" id="searchName" placeholder="教师名">
								</div>
							</div>
							<div class="col-md-2">
								<input type="submit" value="查询" class="btn btn-primary">
								<input type="button" id="insert" value="新增" class="btn btn-success">
							</div>
							<div class="col-md-3"></div>
						</div>
						<div class="row">
							<div class="col-md-1"></div>
							<div class="col-md-10">
								<tr>
									<td align="center">教师ID</td>
									<td align="center">账号ID</td>
									<td align="center">学院</td>
									<td align="center">姓名</td>
									<td align="center">性别</td>
									<td align="center">职称</td>
									<td align="center">学历</td>
									<td align="center">生日</td>
									<td align="center">功能</td>
								</tr>
							</div>
							<div class="col-md-1"></div>
						</div>
						<div class="row">  <!--  内容  -->
							<div class="col-md-1"></div>
							<div class="col-md-10">
								<tbody id="t1">
								<tr th:each="teacher:${pageInfo.getList()}">
									<td align="center" th:text="${teacher.getTeacherId()}"></td>
									<td align="center" th:text="${teacher.getUserId()}"></td>
									<td align="center" th:text="${teacher.getCollegeName()}"></td>
									<td align="center" th:text="${teacher.getTeacherName()}"></td>
									<td align="center" th:text="${teacher.getTeacherSex()}"></td>
									<td align="center" th:text="${teacher.getTeacherJob()}"></td>
									<td align="center" th:text="${teacher.getTeacherQua()}"></td>
									<td align="center" th:text="${teacher.getTeacherBorn()}"></td>
									<td align="center">
											<input type="button" class="btn btn-info" value="修改" id="update" th:name="${teacher.getTeacherId()}">
											<input type="button" class="btn btn-outline-danger" value="删除" th:name="${teacher.getTeacherId()}+'/'+${teacher.getUserId()}">
									</td>
								</tr>
								</tbody>
							</div>
							<div class="col-md-1"></div>
						</div>
						<div class="row">
							<div class="col-md-3"></div>
							<div class="col-md-1"><button id="prePage" class="btn btn-primary" th:onclick="changePage([[${pageInfo.getPrePage()}]])">上一页</button></div>
							<div class="col-md-1">当前第：<a name="pageNum" id="pageNum" th:text="${pageInfo.getPageNum()}"></a>页</div>
							<div class="col-md-1">总共：<a name="pages" id="pages" th:text="${pageInfo.getPages()}"></a>页</div>
							<div class="col-md-1">共：<a name="total" id="total" th:text="${pageInfo.getTotal()}"></a>条记录</div>
							<div class="col-md-1">
								<select name="pageSize" id="pageSize" onchange="changePage(1)" class="form-control-sm">
									<option value="5" th:selected="${pageInfo.getPageSize()==5}">每页5条</option>
									<option value="10" th:selected="${pageInfo.getPageSize()==10}">每页10条</option>
									<option value="15" th:selected="${pageInfo.getPageSize()==15}">每页15条</option>
									<option value="20" th:selected="${pageInfo.getPageSize()==20}">每页20条</option>
								</select>
							</div>
							<div class="col-md-1">
								<button id="nextPage" class="btn btn-primary" th:onclick="changePage([[${pageInfo.getNextPage()}]])">下一页</button>
							</div>
							<div class="col-md-3"></div>
						</div>
					</form>
				</table>
			</div>
		</main>
	</div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<form th:action="@{/insertOrUpdateTeacher}" method="post" id="form">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">新增/修改[信息]</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			</div>
			<div class="modal-body" id="content">
				<tr>
					<td>
						<span id="tIdN">教师ID：</span>
						<input id="tId" type="text" placeholder="教师ID" name="teacherId" readonly>
					</td>
					<td>
						<span id="tAIdN">账户ID：</span>
						<input id="tAId" type="text" placeholder="账户ID" name="userId" readonly>
					</td>
				</tr>
				<tr><h6><mark>学院</mark></h6></tr>
				<tr>
					<td>
						<select class="form-control" id="college" name="collegeId">
						</select>
					</td>
				</tr>
				<tr>
					<td align="center">
						<mark>姓名：</mark><input id="tName" type="text" placeholder="教师姓名" name="teacherName">
					</td>
					<td id="sex">
						<mark>性别：</mark>
						<input type="radio" value="男" name="teacherSex" id="nan">男
						<input type="radio" value="女" name="teacherSex" id="nv">女
					</td>
				</tr>
				<tr>
					<h6><mark>职称</mark></h6>
				</tr>
				<tr>
					<td align="center"><select name="teacherJob" id="Job" class="form-control">
						<option value="">--选择职称--</option>
						<option value="教授">教授</option>
						<option value="副教授">副教授</option>
						<option value="教师">教师</option>
						<option value="主讲">主讲</option>
						<option value="辅导">辅导</option>
					</select></td>
				</tr>
				<tr><h6><mark>学历</mark></h6></tr>
				<tr>
					<td align="center"><select name="teacherQua" id="Qua" class="form-control">
						<option value="">--选择学历--</option>
						<option value="博士后">博士后</option>
						<option value="博士">博士</option>
						<option value="硕士">硕士</option>
						<option value="本科">本科</option>
					</select></td>
				</tr>
				<tr><h6><mark>生日</mark></h6></tr>
				<tr>
					<input type="text" placeholder="yyyy-MM-dd" name="teacherBorn" id="born">
				</tr>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
				<button type="submit" class="btn btn-primary" id="save">保存</button>
			</div>
		</div><!-- /.modal-content -->
		</form>
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div th:replace="~{commons/template::script}"></div>
</body>
<script>
	$("#insert").click(function (){
		$("#form")[0].reset(); /* 对【表单】的重置  所以选定的是 form表单的id */
		$("#tIdN").hide();
		$("#tId").hide();
		$("#tAIdN").hide();
		$("#tAId").hide();
		$.ajax({
			url: "selectAllCollege",
			data: {},
			type: "get",
			dataType: "json",
			async:false,
			success:function (returnData) {
				$("#college").html("")
				$("#college").append("<option value=''>--选择学院--</option>");
				for (var i=0;i<returnData.length;i++){
					$("#college").append("<option value='"+returnData[i].collegeId+"'>"+returnData[i].collegeName+"</option>");
				}
			}
		})
		$("#myModal").modal('show');
	})
	$("#t1").on("click","input[value='修改']",function() {
		$("#form")[0].reset();
		/* 搜索所有学院 */
		$.ajax({
			url: "selectAllCollege",
			data: {},
			type: "get",
			dataType: "json",
			async:false,
			success:function (returnData) {
				$("#college").html("")
				$("#college").append("<option value=''>-选择学院-</option>");
				for (var i=0;i<returnData.length;i++){
					$("#college").append("<option value='"+returnData[i].collegeId+"'>"+returnData[i].collegeName+"</option>");
				}
			}
		})
		/* 填入已有教师信息 */
		$.ajax({
			url:"selectTeacherById",
			data:{id:this.name},
			type:"get",
			dataType:"json",
			async:false,
			success:function (data){
				$("#tId").val(data.teacherId)
				$("#tAId").val(data.userId)
				$("#college").val(data.collegeId)
				$("#tName").val(data.teacherName)
				$("#Job").val(data.teacherJob)
				if (data.teacherSex=='男'){
					$("#nan").attr("checked","checked");
				}else {
					$("#nv").attr("checked","checked");
				}
				$("#Qua").val(data.teacherQua)
				$("#born").val(data.teacherBorn)
			}
		})
		$("#myModal").modal('show');
	})
	$("#t1").on("click","input[value='删除']",function (){
		let TIDAndUID = this.name;
		if(confirm("确定删除该教师的所有信息？")){
			$.ajax({
				url:"deleteTeacherInfo",
				data:{TIDAndUID:TIDAndUID},
				type:"get",
				dataType:"json",
				success:function (result){
					alert(result.message)
					window.location.href="http://localhost:8080/selectTeacher";
				}
			})
		}
	})
</script>
</html>